<template>
    <div class="NumberOfFaults">
        <p class="NumberOfFaults_P">当月故障设备数</p>
        <div ref="chart" class="NumberOfFaults_main">

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const NumberOfFaults = () => {
    myChart = echarts.init(chart.value);

    window.addEventListener('resize', function () {
        myChart.resize();
    });

    const option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            top: '5%',
            right: '10%',
            data: ['故障设备数（台）'],
            textStyle: {
                color: '#fff', // 图例文字颜色
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '2021-05-01', '2021-05-03', '2021-05-05', '2021-05-07',
                '2021-05-09', '2021-05-11', '2021-05-13', '2021-05-15',
                '2021-05-17', '2021-05-19', '2021-05-21', '2021-05-23',
                '2021-05-25', '2021-05-27', '2021-05-29', '2021-05-31',
            ],
            axisLabel: {
                color: '#fff', // X轴文字颜色
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}', // Y轴数值格式
                color: '#fff', // Y轴文字颜色
            },
            // 去掉 Y 轴的横线（网格线）
            splitLine: {
                show: false, // 关闭网格线
            },
            // 去掉 Y 轴的轴线
            axisLine: {
                show: false, // 关闭 Y 轴轴线
            },
        },
        series: [
            {
                name: '故障设备数（台）',
                type: 'line',
                symbol: 'circle', // 数据点标记形状
                symbolSize: 8, // 数据点大小
                itemStyle: {
                    color: '#ffa500', // 数据点颜色
                },
                lineStyle: {
                    color: '#ffa500', // 折线颜色
                    width: 2, // 折线宽度
                },
                data: [
                    30, 25, 28, 32, 26, 20, 33, 31, 40, 50, 38, 44, 42, 35, 30, 28,
                ],
                smooth: true, // 使折线平滑
            },
        ],
        backgroundColor: '#0b1e3d', // 背景颜色
    };

    myChart.setOption(option);

}

onMounted(() => {
    NumberOfFaults()
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();
    }
})

</script>

<style lang="scss" scoped>
.NumberOfFaults {
    width: 400px;
    height: 200px;
    position: fixed;
    top: 500px;
    right: 8px;
    background: url(/src/assets/Frame_Bottom.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .NumberOfFaults_P {
        width: 100%;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 15px;
    }

    .NumberOfFaults_main {
        width: 100%;
        height: 100%;
    }
}
</style>